<template>
	<view class="recommend">
		<template v-for="(item, index) in recommends" :key="index">
			<view class="recommend-item">
				<view class="imgBox">
					<image class="image" :src="item.image" mode="scaleToFill"></image>
				</view>
				<view class="title">{{item.title}}</view>
			</view>
		</template>
	</view>
</template>

<script setup>
	const props = defineProps({
		recommends: {
			type: Array,
			default: () => []
		}
	})
	
</script>

<style lang="scss">
	.recommend {
		// 这里不传参数是因为我们在封装的时候给了合适的默认值
		@include normalFlex();
		margin-top: 10px;
		
		.imgBox {
			width: 70px;
			height: 70px;
			
			.image {
				width: 70px;
				height: 70px;
				border-radius: 50%;
			}
		}
		
		.title {
			margin-top: 10px;
			text-align: center;
			font-size: 14px;
		}
	}
</style>